import Qt 4.7
import "../colibri"
import "../js/FutuHeia.js" as FutuHeia
import "../js/OAuth.js" as FutuAuth

Item {
    id: appItem
    // Get width and height set from C++
    width: screenWidth
    height: screenHeight
    // We start from the splash screen
    state: "showingSplashView"

    // Is the application authenticated
    property bool authenticated: false

    property int authStep: 0
    property string requestToken: ""
    property string requestTokenSecret: ""
    property string accessToken: ""
    property string accessTokenSecret: ""
    property string authWebViewUrl: ""
    property bool loadingSports: false;
    property string applicationFont: "Nokia Sans"
    property int applicationFontSize: 24
    property int heiaBorderWidth: 4
    property color heiaDarkGrey: "#666666"
    property color heiaMediumGrey: "#999999"
    property color heiaLightGrey: "#cccccc"
    property color heiaYellow: "#f9f02e"
    property color heiaOrange: "orange" // Todo select good value
    property color heiaGreen: "green" // Todo select good value
    property color heiaFocusColorInner: "lightblue"
    property color heiaFocusColorOuter: "white"
    property string heiaModuleBackground: "transparent"
    property string heiaBackgroundImage: "background.png"
    property string heiaTextColor: "white"
    property int splashTimeout: 2000 //

    // date select props
    property alias date: mainView.selectedDate
    property alias month: mainView.selectedMonth
    property alias year: mainView.selectedYear

    // time distance props
    property alias durationHours: mainView.selectedHours
    property alias durationMinutes: mainView.selectedMinutes
    property alias distance: mainView.selectedDistance

    // mood props
    property alias mood: mainView.selectedMood
    property alias comment: mainView.selectedComment

    // sports props
    property alias selectedName: mainView.selectedName
    property alias selectedId: mainView.selectedId

    property string postsButtonText: qsTr("Show posts");
    property string userId: "32566593178" // test user. TODO: input field for this

    Image {
        id: background
        source: heiaBackgroundImage
        anchors.fill: parent
    }

    // When main.qml has loaded call our initialization Javascript function
    Component.onCompleted: {
        state = "showingSplash"

        if (FutuAuth.checkTokens()) {
            authenticated = true;
            splashTimer.start();
        }
    }

    Timer {
        id: splashTimer
        interval:  splashTimeout
        repeat: false
        onTriggered:  {
            FutuAuth.init();
        }
    }

    function initialized() {
        FutuHeia.log("initialized");
        appItem.loadingSports = true;
        FutuHeia.getSports(1); // Get first page of sports
    }

    Image {
        x: 0
        y: 0
        source: "background.png"
    }

    // Application "screens" which we move left to right and back according to state

    AuthView {
        id: authView
        x: FutuHeia.getCoordinateXForView(-1)
        y: 0
        width: parent.width
        height: parent.height
    }

    SplashView {
        id: splashView
        x: FutuHeia.getCoordinateXForView(0)
        y: 0
        width: parent.width
        height: parent.height
    }

    MainView {
        clip: true
        id: mainView
        x: FutuHeia.getCoordinateXForView(1)
        y: 0
        width: parent.width
        height: parent.height
    }

    LogView {
        id: logView
        x: FutuHeia.getCoordinateXForView(2)
        y: 0
        width: parent.width/2
        height: parent.height
    }

    CLButton {
        anchors.top:  parent.top
        anchors.topMargin: 10
        anchors.right:  parent.right
        anchors.rightMargin: 10
        width: 35
        height: 35
        text: qsTr("X")
        fontWeight: "Bold"
        onClicked: Qt.quit();
        hoveredStateOn: false
        borderColor: appItem.heiaFocusColorOuter
        color: appItem.heiaFocusColorInner
        colorWhenPressed: appItem.heiaOrange
        gradientDefaultOn: false
        gradientPressedOn: false
        gradientSelectedOn: false
        textColor: "black"
        borderWidth: 4
    }

    // Model for the sports selector
    Sports {
        id: sportsModel;
    }

    // Application states
    states: [
        State {
            name: "showingAuthView"
            PropertyChanges {
                target: authView
                x: FutuHeia.getCoordinateXForView(0);
            }
            PropertyChanges {
                target: splashView
                x: FutuHeia.getCoordinateXForView(1);
            }
            PropertyChanges {
                target: mainView
                x: FutuHeia.getCoordinateXForView(2);
            }            
            PropertyChanges {
                target: logView
                x: FutuHeia.getCoordinateXForView(3);
            }
        },
        State {
            name: "showingSplashView"
            PropertyChanges {
                target: authView
                x: FutuHeia.getCoordinateXForView(-1);
            }
            PropertyChanges {
                target: splashView
                x: FutuHeia.getCoordinateXForView(0);
            }
            PropertyChanges {
                target: mainView
                x: FutuHeia.getCoordinateXForView(1);
            }
            PropertyChanges {
                target: logView
                x: FutuHeia.getCoordinateXForView(2);
            }
        },
        State {
            name: "showingMain"
            PropertyChanges {
                target: authView
                x: FutuHeia.getCoordinateXForView(-2);
            }
            PropertyChanges {
                target: splashView
                x: FutuHeia.getCoordinateXForView(-1);
            }
            PropertyChanges {
                target: mainView
                x: FutuHeia.getCoordinateXForView(0);
            }
            PropertyChanges {
                target: logView
                x: FutuHeia.getCoordinateXForView(1);
            }
        },
        State {
            name: "showingLog"
            PropertyChanges {
                target: authView
                x: FutuHeia.getCoordinateXForView(-3);
            }
            PropertyChanges {
                target: splashView
                x: FutuHeia.getCoordinateXForView(-2);
            }
            PropertyChanges {
                target: mainView
                x: FutuHeia.getCoordinateXForView(0);
            }
            PropertyChanges {
                target: logView
                x: FutuHeia.getCoordinateXForView(0) + screenWidth/2;
            }
        }

    ]

    transitions: [
        Transition {
            from: "*"; to: "*"
            NumberAnimation { properties: "x"; easing.type: Easing.OutBounce; duration: 1000; }
        }

    ]
}
